<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>165-碰撞检测.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box1{
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background-color:skyblue;
		}
		#box2{
			position: absolute;
			top: 200px;
			left: 400px;
			width: 400px;
			height: 400px;
			background-color:green;
		}
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
<script>
	function checkBump(obj1,obj2){
	 if(obj1.offsetLeft + obj1.offsetWidth > obj2.offsetLeft
	 && obj1.offsetTop + obj1.offsetHeight > obj2.offsetTop 
	 && obj2.offsetLeft + obj2.offsetWidth > obj1.offsetLeft
	 && obj2.offsetTop + obj2.offsetHeight > obj1.offsetTop){
	 	return true;
	}else{
		return false;
	}
}

	var oBox1 = document.getElementById('box1');
	var oBox2 = document.getElementById('box2');
	var disX = 0,disY = 0;
	oBox1.onmousedown = function(ev){
		disX = ev.clientX - oBox1.offsetLeft;
		disY = ev.clientY - oBox1.offsetTop;
		document.onmousemove = function(ev){
			oBox1.style.left = ev.clientX - disX + "px";
			oBox1.style.top = ev.clientY - disY + "px";

			if(checkBump(oBox1,oBox2)){
				oBox2.style.backgroundColor = "blue";
			}else{
				oBox2.style.backgroundColor = "skyblue";
			}
		}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}
</script>
</html>